<script setup> 
import pageContainer from '@/components/page-container.vue';
import {useUserStore} from '@/stores/modules/user'
import {userDataUpdateService} from '@/api/userLogin'
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

const formRef = ref()


const {user:{email,id,nickname,username},getUser} = useUserStore()
const formModel = ref({
    id,
    username,
    nickname,
    email
})
const rules = {
    name:[
        { required: true, message: '请输入用户名称', trigger: 'blur' },
    ],
    nickname:[
        { required: true, message: '请输入用户名', trigger: 'blur' },
        { min:2,max:10, message:'用户名长度必须小于等于10'}
    ],
    email:[
        { required: true, message: '请输入邮箱', trigger: 'blur' },
        { type:'email',message:'请输入正确邮箱地址',trigger:'blur'}
    ]
}

const Onsubmit = async() =>{
    console.log('ok');
    
    await formRef.value.validate()
    await userDataUpdateService(formModel.value)
    getUser()
    ElMessage('修改成功')
}
</script>

<template>
    <page-container title="基本资料">
        <el-form :model="formModel" :rules="rules" ref="formRef">
            <el-form-item label="登录名称" prop="username">
                <el-input placeholder="请输入登录名称" v-model="formModel.username" disabled></el-input>
            </el-form-item>
            <el-form-item label="用户昵称" prop="nickname">
                <el-input placeholder="请输入用户昵称" v-model="formModel.nickname"></el-input>
            </el-form-item>
            <el-form-item label="用户邮箱" prop="email">
                <el-input placeholder="请输入邮箱地址" v-model="formModel.email"></el-input>
            </el-form-item>
        </el-form>
        <el-button type="primary" @click="Onsubmit">提交</el-button>
    </page-container>
</template>

<style scoped>

</style>